<style lang="scss" scoped>
.table_title {
  text-align: center;
  height: 32px;
  min-height: 32px;
  font-weight: bold;
}

.table_content {
  text-align: center;
  height: 32px;
  min-height: 32px;
  font-size: 14px;
}

.table_content:hover {
  cursor: pointer;
  background-color: #ebf7ff;
}
</style>
<template>
  <div>
    <Form
      ref="teamInfo"
      :label-width="labelWidth"
      style="border: 1px solid #dcdee2"
      label-position="right"
    >
      <div style="padding: 10px">
        <table width="100%">
          <tr class="table_title">
            <td width="10%">服务名称</td>
            <td width="50%">传输方式</td>
            <td width="10%">存储数据量</td>
            <td width="30%">测算依据</td>
          </tr>
          <tr class="table_content">
            <td>
              <Checkbox
                v-model="toolInfo.spContent.ifNeedPublicData"
                @on-change="showOpenMessage"
                style="font-size: 14px"
                :disabled="ifedit"
              >
                公有数据
              </Checkbox>
            </td>
            <td>
              <CheckboxGroup
                v-if="isEdit != undefined && isEdit != 1"
                v-model="toolInfo.spContent.publicTransmisMode"
              >
                <Checkbox
                  style="font-size: 14px"
                  label="实时"
                  :disabled="ifedit"
                  >实时</Checkbox
                >
                <Checkbox
                  style="font-size: 14px"
                  label="离线"
                  :disabled="ifedit"
                  >离线</Checkbox
                >
              </CheckboxGroup>
            </td>
            <td>
              <Input
                v-if="isEdit != undefined && isEdit != 1"
                v-model="toolInfo.spContent.publicMemory"
                :readonly="ifedit"
                placeholder="每日传输数据量"
              />
            </td>
            <td>
              <Input
                v-if="isEdit != undefined && isEdit != 1"
                v-model="toolInfo.spContent.publicPurpose"
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :readonly="ifedit"
                placeholder="每日传输数据量"
              />
            </td>
          </tr>
          <tr class="table_content">
            <td>
              <Checkbox
                v-model="toolInfo.spContent.ifNeedPrivateData"
                style="font-size: 14px"
                :disabled="ifedit"
              >
                私有数据
              </Checkbox>
            </td>
            <td>
              <CheckboxGroup v-model="toolInfo.spContent.privateTransmisMode">
                <Checkbox
                  style="font-size: 14px"
                  label="实时"
                  :disabled="ifedit"
                  >实时</Checkbox
                >
                <Checkbox
                  style="font-size: 14px"
                  label="离线"
                  :disabled="ifedit"
                  >离线</Checkbox
                >
              </CheckboxGroup>
            </td>
            <td>
              <Input
                v-model="toolInfo.spContent.privateMemory"
                :readonly="ifedit"
                placeholder="每日传输数据量"
              />
            </td>
            <td>
              <Input
                v-model="toolInfo.spContent.privatePurpose"
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :readonly="ifedit"
                placeholder="每日传输数据量"
              />
            </td>
          </tr>
        </table>
      </div>
      <template
        v-if="
          (((isEdit == 22 ||
            isEdit == 21 ||
            serviceType == 'resource_dataEtl') &&
            toolInfo.resourceProgress &&
            toolInfo.resourceProgress.length > 0) ||
            (toolInfo.needResources && toolInfo.needResources.length > 0)) &&
          isEdit != undefined &&
          isEdit != 1
        "
      >
        <Divider> 默认资源 </Divider>
        <Row style="padding: 0 10px 10px">
          <Col span="10">
            <i-switch
              v-model="toolInfo.default"
              @on-change="$forceUpdate()"
              v-if="!ifedit"
            >
              <span slot="open">编辑</span>
              <span slot="close">默认</span>
            </i-switch>
          </Col>
          <Col span="24">
            <resourceTable
              v-if="
                isEdit == 22 ||
                isEdit == 21 ||
                serviceType == 'resource_dataEtl'
              "
              :ifedit="ifedit"
              :type="'tool'"
              :isEditTool="toolInfo.default == 0 ? false : true"
              v-model="toolInfo.resourceProgress"
              :showborder="false"
              :columnsList="columnsList"
            ></resourceTable>
            <resourceTable
              v-else
              :ifedit="ifedit"
              :type="'tool'"
              :isEditTool="toolInfo.default == 0 ? false : true"
              v-model="toolInfo.needResources"
              :showborder="false"
              :columnsList="columnsList"
            ></resourceTable>
          </Col>
        </Row>
      </template>
      <template v-if="toolInfo.spContent.ifNeedPublicData">
        <Divider> 公有数据申请信息 </Divider>
        <Row>
          <Col span="8">
            <FormItem label="数据需求频率：">
              <Input
                v-if="ifedit"
                v-model="toolInfo.spContent.dataFrequent"
                :readonly="true"
              />
              <Select v-else v-model="toolInfo.spContent.dataFrequent">
                <Option value="临时">临时</Option>
                <Option value="周期">周期</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="8" class="col_left">
            <FormItem label="数据生效时间：" style="text-align: right">
              <Input
                v-if="ifedit"
                v-model="toolInfo.spContent.actTime"
                :readonly="true"
              />
              <DatePicker
                v-else
                type="datetime"
                format="yyyy-MM-dd"
                :options="disabledDate"
                v-model="toolInfo.spContent.actTime"
                style="width: 100%"
                placeholder="当前默认账期"
              ></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
            <FormItem label="抽样要求：">
              <Input
                v-model="toolInfo.spContent.extDemand"
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4 }"
                :readonly="ifedit"
              />
            </FormItem>
          </Col>
          <Col
            span="8"
            class="col_left"
            v-if="isEdit != undefined && isEdit != 1"
          >
            <FormItem label="ETL工具：">
              <Input
                v-if="ifedit"
                v-model="toolInfo.spContent.etlTool"
                :readonly="true"
              />
              <RadioGroup v-else v-model="toolInfo.spContent.etlTool">
                <Radio label="UCX"></Radio>
                <Radio label="UAP"></Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
        <Row v-if="isEdit != undefined && isEdit != 1">
          <Col span="8">
            <FormItem label="是否安全审批：">
              <Input
                v-if="ifedit"
                v-model="toolInfo.spContent.isSafe"
                :readonly="true"
              />
              <RadioGroup v-else v-model="toolInfo.spContent.isSafe">
                <Radio label="否"></Radio>
                <Radio label="是"></Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="8" class="col_left">
            <FormItem label="安全加密要求：">
              <Input
                v-model="toolInfo.spContent.encryption"
                type="textarea"
                :readonly="ifedit"
                :autosize="{ minRows: 1, maxRows: 4 }"
              />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="22" style="width: 96.666667%">
            <FormItem label="需求描述:">
              <Input
                v-model="toolInfo.spContent.reqDes"
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4 }"
                :readonly="ifedit"
              />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="22" style="width: 96.666667%">
            <FormItem label="备注:">
              <Input
                v-model="toolInfo.spContent.remark"
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4 }"
                :readonly="ifedit"
              />
            </FormItem>
          </Col>
        </Row>
        <dataInfo :Papply="toolInfo.spContent" :ifedit="ifedit"></dataInfo>
      </template>

      <template v-if="toolInfo.spContent.etlAccount">
        <Divider> 实际分配数据表名称 </Divider>
        <Row style="padding: 0 50px 10px">
          <Col span="8">
            <FormItem
              label="ETL账号："
              v-if="isEdit != undefined && toolInfo.spContent.etlAccount"
            >
              <Input
                v-model="toolInfo.spContent.etlAccount"
                :readonly="ifedit"
              />
            </FormItem>
          </Col>
          <Col
            span="8"
            class="col_left"
            v-if="isEdit != undefined && toolInfo.spContent.etlPath"
          >
            <FormItem label="采集数据目录：" v-if="isEdit != undefined">
              <Input v-model="toolInfo.spContent.etlPath" :readonly="ifedit" />
            </FormItem>
          </Col>
        </Row>
        <Row style="padding: 0 50px 10px" v-if="toolInfo.spContent.customData">
          <Col span="24">
            <Table border :columns="etlDataColumns" :data="etlDataList">
            </Table>
            <div v-if="etlTotal > 10" style="float: right; margin: 10px">
              <Page
                :current="etlPage"
                :total="etlTotal"
                :page-size="etlTotalPageSize"
                show-total
                @on-change="changeEtlPage"
              ></Page>
            </div>
          </Col>
        </Row>
      </template>
    </Form>
  </div>
</template>

<script>
import dataInfo from "../../settledin/dataInfo.vue";
import resourceTable from "../../../../base/tables";
export default {
  name: "open_api_platform_model",
  components: {
    resourceTable,
    dataInfo,
  },
  data() {
    return {
      etlTotalPageSize: 5,
      etlPage: 1,
      etlTotal: 0,
      etlDataList: [],
      etlDataColumns: [
        {
          title: "序号",
          type: "index",
          width: 80,
          align: "center",
        },
        {
          title: "表名",
          key: "dataName",
          align: "center",
        },
      ],

      disabledDate: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 24 * 60 * 60 * 1000;
        },
      },
      isShow: false,
      showOpenDataMessage: false,
      spEtlTool: {
        ifNeedPublicData: false,
        publicTransmisMode: [],
        publicMemory: "",
        publicPurpose: "",
        ifNeedPrivateData: false,
        privateTransmisMode: [],
        privateMemory: "",
        privatePurpose: "",
        dataFrequent: "",
        extDemand: "",
        etlTool: "",
        etlPath: "",
        encryption: "",
        isSafe: "",
        reqDes: "",
        remark: "",
        datas: [],
      },
      labelWidth: 140,
    };
  },
  props: {
    isEdit: {},
    value: {},
    ifedit: {},
    spContent: {},
    columnsList: {},
    serviceType: {},
  },
  created: function () {
    console.log(
      "toolInfo ucx ----->",
      JSON.stringify(this.toolInfo.spContent),
      this.toolInfo,
      this.Papply
    );
    // this.getDefaultApiServList()
    if (!this.toolInfo.spContent) {
      this.toolInfo.spContent = this.spEtlTool;
    } else if (this.toolInfo.spContent.customData) {
      this.etlTotal = this.toolInfo.spContent.customData.length;
      this.changeEtlPage(1);
    }
  },
  mounted() {},

  methods: {
    changeEtlPage(page) {
      this.etlPage = page;
      var pageNumber = page * this.etlTotalPageSize;
      if (pageNumber > this.etlTotal) {
        this.etlDataList = this.toolInfo.spContent.customData.slice(
          (page - 1) * this.etlTotalPageSize,
          this.etlTotal
        );
      } else {
        this.etlDataList = this.toolInfo.spContent.customData.slice(
          (page - 1) * this.etlTotalPageSize,
          pageNumber
        );
      }
    },
    showOpenMessage() {
      if (!this.isShow) {
        this.isShow = true;
        this.showOpenDataMessage = true;
      }
    },
    getSpContent() {
      // 如果spContent不为空，说明是草稿，为空则调接口获取
      if (this.toolInfo.reqId && this.toolInfo.id) {
        this.toolInfo.spContent = this.spEtlTool;
        var param = {
          spServiceType: this.toolInfo.spServiceType,
          alloId: this.toolInfo.reqId ? this.toolInfo.reqId : this.toolInfo.id,
        };
        var that = this;
        this.myAjax.get({
          url: this.CONFIG.progress_url + "/sp-list/detail",
          that: that,
          params: param,
          success: function (data) {
            data.actTime = that.formatTime(data.actTime);
            if (data.ifNeedPublicData == 1) {
              data.ifNeedPublicData = true;
            } else {
              data.ifNeedPublicData = false;
            }
            if (data.ifNeedPrivateData == 1) {
              data.ifNeedPrivateData = true;
            } else {
              data.ifNeedPrivateData = false;
            }
            data.privateTransmisMode = JSON.parse(data.privateTransmisMode);
            data.publicTransmisMode = JSON.parse(data.publicTransmisMode);
            that.$set(that.toolInfo, "spContent", data);
            // that.$forceUpdate()
          },
        });
      } else {
        this.toolInfo.spContent = this.spEtlTool;
      }
    },
    formatTime(value) {
      return this.utils.formatDate(new Date(value * 1000), "yyyy-MM-dd");
    },
  },
  computed: {
    toolInfo: {
      get: function () {
        return this.value;
      },
      set: function (value) {
        this.$emit("input", value);
      },
    },
  },
  watch: {
    toolInfo() {
      console.log("customData ------------>>>>>");
      if (!this.toolInfo.spContent) {
        this.getSpContent();
      } else if (this.toolInfo.spContent.customData) {
        this.etlTotal = this.toolInfo.spContent.customData.length;
        this.changeEtlPage(1);
      }
    },
  },
};
</script>
